<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"
    xmlns:spring="http://www.springframework.org/tags">

<ui:composition template="/templates/main.xhtml">    
    <ui:define name="head">
	    <link href="#{facesContext.externalContext.requestContextPath}/resources/css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
    	<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.Jcrop.js"></script>
	    <script type="text/javascript">
		    jQuery(function($){
		    	jQuery('#target').Jcrop({
	           		onChange:   showCoords,
	            	onSelect:   showCoords
	          	});
		    });

		    function showCoords(c)
		    {
		    	jQuery('#x1').val(c.x);
		    	jQuery('#y1').val(c.y);
		    	jQuery('#x2').val(c.x2);
		    	jQuery('#y2').val(c.y2);
		    	jQuery('#w').val(c.w);
		    	jQuery('#h').val(c.h);
		    };
	    </script>
    </ui:define>
    <ui:define name="body">

		<ul class="breadcrumb">
			<li><a href="#" class="breadcrumb-current">1: Select Customer</a></li>
			<li><a href="#">2: Add Products</a></li>
			<li><a href="#">3: Payment</a></li>
			<li><a href="#">4: Print Invoice</a></li>
		</ul>
        
        <h1>Jcrop - Hello World</h1>
      	<img src="pool.jpg" id="target" alt="Flowers" />
		<div style="margin-top: 10px">
	    	<label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
	      	<label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
	      	<label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
	      	<label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
	      	<label>W <input type="text" size="4" id="w" name="w" /></label>
	      	<label>H <input type="text" size="4" id="h" name="h" /></label>
	    </div>
    </ui:define>
</ui:composition>    
    
</html>